<template>
    <div>
      <div style="width: 92%;margin: auto">
        <div class="search">
			<div class="searchtext">
				<img src="../../../src/assets/img/shouye/sousuo.png" alt="" :class="bol?'img':'img1'">
				<input type="text" placeholder="搜索相关课程关键字" v-model="input" @focus="bol = false" :class="bol?'input':'input1'">
			</div>
          <span @click="search()" style="color:rgba(51,51,51,1);">搜索</span>
        </div>

        <div class="la">
          <p class="p1">探索历史</p>
          <img src="../../../src/assets/img/shanchu.png" @click="shanchuclick" alt="" style="width:0.36rem;height: 0.36rem;float: right;margin-top: 0.42rem;">
        </div>
      </div>
      <div class="history">
        <p v-for="(item,index) in inputarrnew" @click="his(item)">{{item}}</p>
      </div>
      <!--推荐搜索-->
      <div class="z" v-if="tj.length!=0||tj.length!='0'">
        <div class="tuijian">
          <p>推荐搜索</p>
          <img src="../../../src/assets/img/search/fire.png" alt="">
        </div>
        <div class="number" v-for="(item,index) in tj" @click="his(item)">
          <img src="../../../src/assets/img/search/top.png" alt="" v-if="index == 0||index == '0'">
          <img src="../../../src/assets/img/search/one.png" alt="" v-if="index == 1||index == '1'">
          <img src="../../../src/assets/img/search/two.png" alt="" v-if="index == 2||index == '2'">
          <img src="../../../src/assets/img/search/thr.png" alt="" v-if="index == 3||index == '3'">
          <img src="../../../src/assets/img/search/four.png" alt="" v-if="index == 4||index == '4'">
          <p>{{item}}</p>
        </div>
      </div>

    </div>
</template>

<script>
    export default {
        name: "Search",
      data(){
          return{
            input:'',
            teacher:[],
            bol:true,
            tj:[],
			type:1,    //1首页
			inputarrnew:[],
          }
      },
      methods:{
			// 点击删除历史
			shanchuclick(){
				this.inputarrnew=[];
				localStorage.removeItem('inputarr');
			},
          search(){
			// var inputarr = this.inputarrnew.concat(this.input);
			var newinput = this.inputarrnew;
			if(this.input==''){
				layer.open({
					content: '请输入搜索内容',
					skin: 'msg',
					time: 2 //1秒后自动关闭
				});
			}else{
				var a=0;
				var b=0;
				if(newinput.length!='0'||newinput.length!=0){
					for(var i=0;i<newinput.length;i++){
						if(this.input==newinput[i]){
							a++
						}else{
							b++
						}
					}
				}else{
					this.inputarrnew = newinput.concat(this.input);
					localStorage.setItem('inputarr',JSON.stringify(this.inputarrnew));
				}
				
				if(a==1||a=='1'){
					localStorage.setItem('inputarr',JSON.stringify(this.inputarrnew));
				}else if(b==1||b=='1'){
					this.inputarrnew = newinput.concat(this.input);
					localStorage.setItem('inputarr',JSON.stringify(this.inputarrnew));
				}else if(a==0||a=='0'){
					this.inputarrnew = newinput.concat(this.input);
					localStorage.setItem('inputarr',JSON.stringify(this.inputarrnew));
				}else if(b==0||b=='0'){
					localStorage.setItem('inputarr',JSON.stringify(this.inputarrnew));
				}
				// console.log(newinput);
				
				sessionStorage.setItem('input',this.input);
				
				var type = this.type;
				if(type==2||type=='2'){
					this.$router.push({
						path:'/zbojieguo',
					})
				}else if(type==3||type=='3'){
					this.$router.push({
						path:'/zhiyejieguo',
					})
				}else{
					this.$router.push({
						path:'/sjieguo',
					})
				}
			}
          },
        his(item){
            this.input = item;
			sessionStorage.setItem('input',this.input);
			var type = this.type;
			// if(type==2||type=='2'){
			// 	this.$router.push({
			// 	  path:'/zbojieguo',
			// 	})
			// }else if(type==3||type=='3'){
			// 	this.$router.push({
			// 	  path:'/zhiyejieguo',
			// 	})
			// }else{
			this.$router.push({
				path:'/sjieguo',
			})
			// }
        },
//         t(item){
// 
//           sessionStorage.setItem('input',item);
//           this.$router.push({
//             path:'/sjieguo',
//           })
//         }
      },
      mounted(){
		  this.sdk.getJSSDK('','',this.$store.state.url);	
         
		if(this.$route.query.type){
          this.type = this.$route.query.type;
		}
		// var type1 = this.type;
		// if(type1==2||type1=='2'){
		//   var type = 4
		// }else if(type1==3||type1=='3'){
		//   var type = 2
		// }else{
		//   var type = 1
		// }
		 this.axios({
			method:'GET',
			url:this.$store.state.url+'home/searchRecom',
			params:{
				// position:type
			},
		}).then((res)=>{
			if(res.data.errcode==0||res.data.errcode=='0'){
				this.tj = res.data.data
			}else{
				layer.open({
					content: res.data.msg,
					skin: 'msg',
					time: 2 //1秒后自动关闭
				});
			}
		})
				
		// console.log(localStorage.inputarr)
		if(localStorage.getItem('inputarr')){
			// console.log(898)
			// console.log(localStorage.getItem('inputarr'))
			this.inputarrnew = JSON.parse(localStorage.getItem('inputarr'));
		}else{
			this.inputarrnew = [];
		}



      }
    }
</script>

<style scoped>
    .search{
      width: 100%;
      height: 0.56rem;
      margin-top: 0.2rem;
			display: flex;
			justify-content: space-around;
    }
		.searchtext{
			width: 5.9rem;
			height: .56rem;
			background: #F0F0F0;
			border-radius:0.28rem;
			border:0.01rem solid #EDEDED;
		}
    .input{
      width: 4.2rem;
      height: 100%;
      font-size:0.24rem;
      color:rgba(153,153,153,1);
      /* text-indent: 1.58rem; */
      outline: none;
      -webkit-appearance: none;
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
			background: #F0F0F0;
    }
		.input1{
		  width: 5rem;
		  height: 100%;
		  font-size:0.24rem;
		  color:rgba(153,153,153,1);
		  /* text-indent: 1.58rem; */
		  outline: none;
		  -webkit-appearance: none;
		  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
			background: #F0F0F0;
		}
    .search span{
      font-size:0.28rem;
      margin-left: 0.3rem;
			display: inline-block;
			line-height: .56rem;
    }
    .img{
      width: 0.32rem;
			height: .32rem;
			margin-left: 1.19rem;
			margin-top: .13rem;
    }
    .img1{
     width: 0.32rem;
     height: .32rem;
     margin-left: .1rem;
     margin-top: .13rem;
    }
    .la:after{
      content: '';
      display: block;
      clear: both;
    }
  .p1{
    margin-top: 0.5rem;
    font-size:0.24rem;
    color: #999999;
    float: left;
  }
  .history{
    width: 93%;
    padding-bottom: 0.3rem;
    box-sizing: border-box;
    padding-left: 0.1rem;
    display: flex;
    flex-wrap: wrap;
  }
  .history p{
    background:rgba(240,240,240,1);
    border-radius:0.25rem;
    font-size:0.28rem;
    color:rgba(153,153,153,1);
    padding: 0.1rem 0.3rem 0.1rem 0.3rem;
    margin-left: 0.3rem;
    margin-top: 0.2rem;
		word-wrap:break-word;
		word-break:break-all;
  }
  .z{
    width: 92%;
    margin: auto;
    margin-top: 0.3rem;
  }
  .tuijian p{
    font-size:0.28rem;
    color:rgba(51,51,51,1);
    display: inline-block;
    vertical-align: middle;
  }
  .tuijian img{
    width: 0.28rem;
    height: 0.28rem;
    vertical-align: middle;
  }
  .number{
    margin-top: 0.3rem;
  }
    .number img{
      width: 0.28rem;
      height: 0.28rem;
      vertical-align: middle;
    }
    .number p{
      font-size:0.28rem;
      color:rgba(51,51,51,1);
      display: inline-block;
      vertical-align: middle;
      margin-left: 0.15rem;
    }

</style>
